<template>
  <div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="客户公司名称" prop="customerCompanyName">
        <el-input v-model="dataForm.customerCompanyName" placeholder="客户公司名称"></el-input>
      </el-form-item>
      <el-form-item label="公司介绍" prop="customerCompanyDesc">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input v-model="dataForm.customerCompanyDesc" placeholder="公司介绍"></el-input>
          </el-col>
          <el-col :span="1" class="login-captcha">
            <el-button type="primary" @click="uploadHandle(1)">上传文件</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="地址" prop="customerAddr">
        <el-input v-model="dataForm.customerAddr" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="customerName">
        <el-input v-model="dataForm.customerName" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item label="职位" prop="customerPosition">
        <el-input v-model="dataForm.customerPosition" placeholder="职位"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="customerMobile">
        <el-input v-model="dataForm.customerMobile" placeholder="手机"></el-input>
      </el-form-item>
      <el-form-item label="微信/QQ/微博" prop="customerWqw">
        <el-input v-model="dataForm.customerWqw" placeholder="微信/QQ/微博"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="customerPhone">
        <el-input v-model="dataForm.customerPhone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item label="传真号码" prop="customerFax">
        <el-input v-model="dataForm.customerFax" placeholder="传真号码"></el-input>
      </el-form-item>
      <el-form-item label="项目类型" prop="customerProjectType">
        <el-select v-model="dataForm.customerProjectType" placeholder="请选择">
          <el-option
            v-for="item in customerProjectTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目需求" prop="customerProjectNeeds">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input v-model="dataForm.customerProjectNeeds" placeholder="项目需求"></el-input>
          </el-col>
          <el-col :span="1" class="login-captcha">
            <el-button type="primary" @click="uploadHandle(2)">上传文件</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="项目预算" prop="customerProjectBudget">
        <el-input v-model="dataForm.customerProjectBudget" placeholder="项目预算"></el-input>
      </el-form-item>
      <el-form-item label="项目周期" prop="customerProjectPeriod">
        <el-input v-model="dataForm.customerProjectPeriod" placeholder="项目周期"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="customerRemarks">
        <el-input v-model="dataForm.customerRemarks" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer"  style="margin-left: 120px;">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <!-- 弹窗, 上传文件 -->
    <upload v-if="uploadVisible" ref="upload"   @refreshDataList="updateNickName"></upload>
  </div>
</template>

<script>
  import API from '@/api'
  import Upload from './upload'
  import store from '@/store'         // api: https://github.com/vuejs/vuex
  export default {
    data () {
      return {
        visible: false,
        uploadVisible: false,
        customerProjectTypes: [{
          value: 1,
          label: '新媒体运营'
        }, {
          value: 2,
          label: '品牌传播'
        }, {
          value: 3,
          label: '线下活动'
        }, {
          value: 4,
          label: '事件营销'
        }, {
          value: 5,
          label: '设计'
        }, {
          value: 6,
          label: '视频拍摄制作'
        }, {
          value: 7,
          label: '媒介资源'
        }, {
          value: 8,
          label: '自定义'
        }
        ],
        dataForm: {
          id: 0,
          userId: '',
          customerCompanyName: '',
          customerCompanyDesc: '',
          customerAddr: '',
          customerName: '',
          customerPosition: '',
          customerMobile: '',
          customerWqw: '',
          customerPhone: '',
          customerFax: '',
          customerProjectType: '',
          customerProjectNeeds: '',
          customerProjectBudget: '',
          customerProjectPeriod: '',
          customerRemarks: '',
          createUserId: '',
          createTime: ''
        },
        dataRule: {
          customerCompanyName: [
            { required: true, message: '客户公司名称不能为空', trigger: 'blur' }
          ],
          customerCompanyDesc: [
            { required: true, message: '公司介绍不能为空', trigger: 'blur' }
          ],
          customerAddr: [
            { required: true, message: '地址不能为空', trigger: 'blur' }
          ],
          customerName: [
            { required: true, message: '联系人不能为空', trigger: 'blur' }
          ],
          customerPosition: [
            { required: true, message: '职位不能为空', trigger: 'blur' }
          ],
          customerMobile: [
            { required: true, message: '手机不能为空', trigger: 'blur' }
          ],
          customerWqw: [
            { required: true, message: '微信/QQ/微博不能为空', trigger: 'blur' }
          ],
          customerProjectType: [
            { required: true, message: '项目类型不能为空', trigger: 'blur' }
          ],
          customerProjectNeeds: [
            { required: true, message: '项目需求不能为空', trigger: 'blur' }
          ],
          customerProjectBudget: [
            { required: true, message: '项目预算不能为空', trigger: 'blur' }
          ],
          customerProjectPeriod: [
            { required: true, message: '项目周期不能为空', trigger: 'blur' }
          ],
          customerRemarks: [
            { required: true, message: '备注不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      Upload
    },
    activated () {
      this.init(0)
    },
    methods: {
      init (id) {
        this.dataForm.userId = store.state.user.id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.userId) {
            API.basecustomer.infoByUserId(this.dataForm.userId).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.id = data.basecustomer.id
                this.dataForm.userId = data.basecustomer.userId
                this.dataForm.customerCompanyName = data.basecustomer.customerCompanyName
                this.dataForm.customerCompanyDesc = data.basecustomer.customerCompanyDesc
                this.dataForm.customerAddr = data.basecustomer.customerAddr
                this.dataForm.customerName = data.basecustomer.customerName
                this.dataForm.customerPosition = data.basecustomer.customerPosition
                this.dataForm.customerMobile = data.basecustomer.customerMobile
                this.dataForm.customerWqw = data.basecustomer.customerWqw
                this.dataForm.customerPhone = data.basecustomer.customerPhone
                this.dataForm.customerFax = data.basecustomer.customerFax
                this.dataForm.customerProjectType = data.basecustomer.customerProjectType
                this.dataForm.customerProjectNeeds = data.basecustomer.customerProjectNeeds
                this.dataForm.customerProjectBudget = data.basecustomer.customerProjectBudget
                this.dataForm.customerProjectPeriod = data.basecustomer.customerProjectPeriod
                this.dataForm.customerRemarks = data.basecustomer.customerRemarks
                this.dataForm.createUserId = data.basecustomer.createUserId
                this.dataForm.createTime = data.basecustomer.createTime
              }
            })
          }
        })
      },
      // 上传文件
      uploadHandle (type) {
        this.uploadVisible = true
        this.$nextTick(() => {
          this.$refs.upload.init(type)
        })
      },
      updateNickName (supplierCompanyDesc, type) {
        if (type === 1) {
          this.dataForm.customerCompanyDesc = supplierCompanyDesc
        } else {
          this.dataForm.customerProjectNeeds = supplierCompanyDesc
        }
      },
      handleChange (val) {
        console.log(val)
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'id': this.dataForm.id || undefined,
              'userId': store.state.user.id,
              'customerCompanyName': this.dataForm.customerCompanyName,
              'customerCompanyDesc': this.dataForm.customerCompanyDesc,
              'customerAddr': this.dataForm.customerAddr,
              'customerName': this.dataForm.customerName,
              'customerPosition': this.dataForm.customerPosition,
              'customerMobile': this.dataForm.customerMobile,
              'customerWqw': this.dataForm.customerWqw,
              'customerPhone': this.dataForm.customerPhone,
              'customerFax': this.dataForm.customerFax,
              'customerProjectType': this.dataForm.customerProjectType,
              'customerProjectNeeds': this.dataForm.customerProjectNeeds,
              'customerProjectBudget': this.dataForm.customerProjectBudget,
              'customerProjectPeriod': this.dataForm.customerProjectPeriod,
              'customerRemarks': this.dataForm.customerRemarks,
              'createUserId': this.dataForm.createUserId,
              'createTime': this.dataForm.createTime
            }
            var tick = !this.dataForm.id ? API.basecustomer.add(params) : API.basecustomer.update(params)
            tick.then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
